<template>
	<div id="singDetails">
		<button class="back_btn" @click="gdBack">
			<i class="iconfont icon-fanhui"></i>
		</button>
		<div class="songImg">
			<img :src="artist.picUrl"/>
		</div>
		<div class="singer_nav">
  				<router-link to="hotsongs">热门单曲</router-link>
		    	<router-link to="zj">专辑</router-link>
		    	<router-link to="xq">歌手详情</router-link>
  		</div>
  		<router-view></router-view>
	</div>
	
</template>

<script>
	import axios from 'axios';
	$(window).scroll(function(){						
		var de=$(window).scrollTop();	
		if(de>281.25){
			$(".singer_nav").css({"position":"fixed","top":"0"})
		}else{
			$(".singer_nav").css({"position":"absolute","top":"281.25px"})
		}
	})
	export default{
		data(){
			return{
				artist:" ",
				hotsongs:[]
			}
		},
		created(){
			console.log(this.$route.query.id)
		},
		beforeMount(){
			var id = this.$route.query.id;
			axios.get("https://netease.bluej.cn/artists?id="+id).then((res)=>{
				console.log("ddd0",res)
				this.artist = res.data.artist;
				this.hotsongs = res.data.hotSongs;
				console.log(this.artist);
				console.log(this.hotsongs)
			})
		},
		methods:{
			gdBack(){
				this.$router.push({path:"/singer"});
				this.$parent.flag=true;
			}
		}
	}
</script>

<style lang="scss">
	#singDetails{
		position: relative;
		.back_btn{
			position: absolute;
			z-index: 10;
			background: none;
			outline: none;
			border: none;
			top:10px;
			left:20px;
			
			i{
				font-size: 30px;
				color: #D43C33;
			}
		}
		.songImg{
			height: 75vw;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.singer_nav{
			position: absolute;
			top:75vw;
			width: 100vw;
			background: #343435;
			display: flex;
			display: -webkit-flex;
			justify-content:space-around;
			a{
				line-height: 35px;
				color: white;
				width:25%;
				text-decoration: none;
			}
			.router-link-active{
				border-bottom: 3px solid #D43C33;
				color:#D43C33;
			}
		}
	}
	
</style>